<template>
  <div>
    <div class="bd6 flex-row justify-between">
      <div class="outer6 flex-col" v-for="item,index in tags" :key="index" @click="toggle(item)"
        :class="{
        active: active===item.id
        }">
        <span class="word11">{{item.name}}</span>
      </div>
      <span class="txt5">浏览量</span>
    </div>

    <div class="table-container">
      <div :class="{marquee_top:animate}">
        <div class="bd7 flex-row" v-for="item,index in list" :key="index"
          :style="{display: 'flex', 'justify-content': 'space-between'}">
          <div class="main3 flex-col">
            <img src="~@/assets/shouye/1.png" alt="" v-if="item.index===1">
            <img src="~@/assets/shouye/2.png" alt="" v-else-if="item.index===2">
            <img src="~@/assets/shouye/3.png" alt="" v-else-if="item.index===3">
            <span class="info3" v-else>{{item.index}}</span>
          </div>
          <div class="main4 flex-col justify-between">
            <div class="box5 flex-col"></div>
            <div class="box5-value flex-col" :style="'width:' +(item.value/total)*100*0.88 + '%' "></div>
            <span class="info4">{{item.name}}</span>
          </div>
          <span class="info5">{{item.value}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataFrom from '@/assets/json/worksApplication.json'
export default {
  data(){
    return {
      dataFrom: dataFrom,
      active: 1,
      tags: [{name: '表演', id: 1},{name: '展示', id: 2},{name: '媒体', id: 3}],
      list: [],
      animate: false,
      timer: null,
      total: 0
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      let array = []
      if(this.active===1) array = this.dataFrom.performance
      if(this.active===2) array = this.dataFrom.display
      if(this.active===3) array = this.dataFrom.media
      let list = []
      array.forEach((item, i) => {
        item.index = i+1
        list.push(item)
      });
      array.forEach((item, i) => {
        item.index = i+1
        list.push(item)
      });
      this.list = list
      this.total = list[0].value
      this.timer = setInterval(this.showMarquee, 2000);
    },
    showMarquee: function() {
      this.animate = true;
      setTimeout(() => {
        this.list.push(this.list[0]);
        this.list.shift(); // 删除数组中的第一个元素
        this.animate = false;
      }, 500);
    },
    toggle(item){
      clearInterval(this.timer)
      this.active = item.id
      this.init()
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.table-container{
  overflow: hidden;
  height: 448px;
}
.marquee_top {
  transition: all 0.5s ease-out;
  margin-top: -64px;
}
.box5-value{
  height: 21px;
  background: url(~@/assets/shouye/bar.png) no-repeat;
  background-size: 100% 21px;
  position: absolute;
  top: -11px;
}
</style>
